$(function () {
    let CateDatas;
    init();

    function init() {
        baicaijia();
        eventList()
        // renderRight()
    }

    function eventList(params) {
        $(".bcj-head-cat").on("tap", "li", function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            renderRight(index);
        })
    }

    function baicaijia() {
        $.get("http://193.112.55.79:9090/api/getbaicaijiatitle", (result) => {
            //获取要渲染的导航条数据
            CateDatas = result.result;
            //渲染导航条
            renderLeft();
            renderRight(0)

        })
    }
    //渲染导航条
    function renderLeft() {
        let leftHtml = '';
        for (let i = 0; i < CateDatas.length; i++) {

            let tmpHtml = `<li class="${i==0?'active':''}""><a href="javascript:; " data-titleid="${CateDatas[i].titleId}">${CateDatas[i].title}</a></li>`
            leftHtml += tmpHtml;
        }
        $(".tabs").html(leftHtml);
        //获取li的宽度
        var lis = $(".tabs li");
        var sum = 0;
        for (var i = 0; i < lis.length; i++) {
            sum += $(lis[i]).width();
        }
        sum += 35;



        //初始化滚动条
        setTimeout(() => {
            $(".tabs").width(sum)
            new IScroll('.bcj-title', {
                mouseWheel: true, //鼠标滚轮支持  
                scrollbars: false, //滚动条支持  
                scrollX: true, //滚动方向（水平）  
                bounce: true, //边界时的反弹动画，默认true  
                click: true, //IScroll默认禁止了点击事件，如需绑定点击事件，请将该参数值设为true  
                startX: 0, //滚动条开始的位置（横坐标）  
                startY: 0, //滚动条开始的位置（纵坐标）  
                tap: true, //设置为true时，允许为用户点击或者触摸（并没有滚动时）触发一个自定义事件，或者设置值为一个自定义事件名称的字符串  
            });
            //    console.log(111)
        }, 500);
    }
    //渲染商品
    function renderRight(index) {
        $.get("http://193.112.55.79:9090/api/getbaicaijiaproduct?titleid=" + index, (result) => {
            //获取要渲染的导航条数据
            CateDatas = result.result;
            //渲染导航条
            let html = template('baicaijiaTitleTmp', {
                arr: CateDatas
            })
            
            $(".bcj-list ul").html(html);
            
            let imgLength = $(".bcj-list img").length;
            console.log(imgLength);
            new IScroll('.bcj-list');
        })



    }
})